﻿@using MvcControlsToolkit
@{
    ViewBag.Title = "Home Page";
}

<style type="text/css" media="all"> 
    
#Splitter {
	height: 300px;
	width: 100%;
	border: 1px solid #aaa;
	overflow:auto;
}
</style> 

<script type="text/javascript">
    function WindowLoadingContent(event, ui) {
        ui = $("#" + event.target.id);
        var action = ui.attr("mvc-action");
        ui.load(action);
    }

    function OnSliderChange(event, ui) {
    }
</script>

<h3>Slider</h3>

@Html.Slider(new Slider("Slider") { OnChange = "OnSliderChange", IsAnimate = true, Range = "max", Orientation = "vertical" })

<h3>ProgressBar</h3>

@Html.Progressbar(new ProgressBar("Progressbar") { Value = 50})

@Html.Window(new Window("WindowWithStaticContent") { Title = "Dialog window", Position = "top" }.SetContent(ContentType.Static, "This is static content"))
@Html.Window(new Window("WindowWithPArtialView") { Title = "Dialog window", Position = "center" }.SetContent(ContentType.PartialView, "DialogPartialView"))
@Html.Window(new Window("WindowWithRemoteAction") { Title = "Dialog window", Position = "bottom" }.SetContent(ContentType.RemoteAction, "/Home/DialogAjaxView"))

<h3>Tabs</h3>

@Html.Tabs(new Tabs("Tabs")
        .AddTab(new TabItem("Static").SetContent(ContentType.Static, "This is static content"))
        .AddTab(new TabItem("Patrial view").SetContent(ContentType.PartialView, "TabPartialView"))
        .AddTab(new TabItem("Remote action").SetContent(ContentType.PartialView, "PieChart"))
)

<h3>Accordian</h3>

@Html.Accordion(new Accordion("Accordion")
        .AddItem(new AccordionItem("Static").SetContent(ContentType.Static, "This is static content"))
        .AddItem(new AccordionItem("Patrial view") { Selected = true }.SetContent(ContentType.PartialView, "PieChart"))
)

<h3>Date picker</h3>

@Html.DatePicker(new DatePicker("Datepicker"){CloseText = "Закрыть", MaxDate = DateTime.Now.AddDays(1), PrevText = "Previus"})

<h3>Autocomplete</h3>
<p>with static source: @Html.AutoComplete(new AutoComplete("AutoComplete1") { Source = new[] { "abc", "def", "sdsd" } })</p>
<p>with remote source: @Html.AutoComplete(new AutoComplete("AutoComplete2") { RequestType = "Post", Source = "/Home/Source" })</p>

<h3>Splitter</h3>
@Html.Splitter(new Splitter("Splitter")
                {
                    Type = SplitterType.Vertical,
                    First = new Splitter("FirstItem").SetContent(ContentType.Static, "Hello world!"),
                    Second = new Splitter("SecondItem").SetContent(ContentType.Static, "PieChart")
                })

<div id="chartdiv" style="height:400px;width:300px;"></div>
<script type="text/javascript">
    $.jqplot('chartdiv', [[[1, 2], [3, 5.12], [5, 13.1], [7, 33.6], [9, 85.9], [11, 219.9]]]);
</script>